<template>
  <div class="search-box">
    <i class="weui icon-search-o"></i>
    <input type="text" class="box" :style="{ border: 'none', outline: 'none' }" v-model="query" :placeholder="placehoder"  @focus="ifocus" ref="sinput" />
    <i v-show="query" class="iconfont icon-guanbi2fill" @click="clearQuery"></i>
  </div>
</template>

<script type="text/ecmascript-6">
import { debounce } from 'common/js/tools'

export default {
  name: 'search-box',
  data () {
    return {
      query: ''
    }
  },
  props: {
    placehoder: {
      type: String,
      default: '搜索分类/品牌/商品'
    }
  },
  methods: {
    ifocus (e) {
      this.$emit('ifocus', e)
    },
    doBlur () {
      this.$refs.sinput.blur()
    },
    clearQuery () {
      this.query = ''
    },
    setQuery (query) {
      this.query = query
    },
    focus () {
      this.$refs.sinput.focus()
    }
  },
  created () {
    this.$watch('query', debounce((newVal) => {
      this.$emit('query', newVal)
    }, 300))
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~common/stylus/variable"

.search-box
  width: 100%
  display: flex
  align-items: center
  height: 24px // 关键属性
  box-sizing: border-box
  background: #F9F9F9
  border-radius: 12px
  border: 1px solid gray
  overflow: hidden
  .icon-search-o
    font-size: 16px
    color: gray
    margin: 0px 5px
  .box
    flex: 1
    line-height: 18px
    background: #F9F9F9
    color: $color-text
    font-size: 14px
    width: 65%
    &::placeholder
      color: #C2C2C8
  .icon-guanbi2fill
    font-size: 16px
    color: gray
    margin-right: 5px

</style>
